import React, { Component } from 'react'
import { TabBar } from 'antd-mobile';
import {MapConsumer} from '../../context/MapContext'

import cookbook from 'assets/images/cookbook.png'
import cookbookActive from 'assets/images/cookbook-active.png'
import menu from 'assets/images/menu.png'
import menuActive from 'assets/images/menu-active.png'

import map from 'assets/images/location.png'
import mapActive from 'assets/images/location-active.png'

import more from 'assets/images/more.png'
import moreActive from 'assets/images/more-active.png'

import CookBook from 'views/home/cookbook/CookBook'
import Category from 'views/home/category/Category'
import Map from 'views/home/map/Map'
import More from 'views/home/more/More'


const tabbarlist=[{
  title:'菜谱大全',
  icon:cookbook,
  iconActive:cookbookActive,
  component:CookBook,
  id:"cookbook"
},
{
  title:'分类',
  icon:menu,
  iconActive:menuActive,
  component:Category,
  id:"categroy"
},

{
  title:'更多',
  icon:more,
  iconActive:moreActive,
  component:More,
  id:"more"
}


]


const mapBar = {
  title:'地图',
  icon:map,
  iconActive:mapActive,
  component:Map,
  id:"map"
};

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'cookbook'
    };
  }

  render() {

    return (
    <MapConsumer>
      {
        ({showMap})=>{
          if(showMap&&tabbarlist.length ===3){
            tabbarlist.splice(2,0,mapBar)
          }else{
            if(!showMap&&tabbarlist.length ===4){
              tabbarlist.splice(2,1)
            }
          }

          return (
            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
              <TabBar
                unselectedTintColor="#949494"
                tintColor="#33A3F4"
                barTintColor="white"
                hidden={this.state.hidden}
              >
                {
                  tabbarlist.map((item)=>{
                    return (
                      <TabBar.Item
                      title={item.title}
                      key={item.id}
                      icon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: `url(${item.icon}) center center /  21px 21px no-repeat` }}
                      />
                      }
                      selectedIcon={<div style={{
                        width: '22px',
                        height: '22px',
                        background: `url(${item.iconActive}) center center /  21px 21px no-repeat` }}
                      />
                      }
                      selected={this.state.selectedTab ===item.id}
                      onPress={() => {
                        console.log(this.props)
                        this.props.history.push(`/home/${item.id}`)
                        this.setState({
                          selectedTab: item.id,
                        });
                      }}
                    >
                      {
                        <item.component></item.component>
                      }
                    </TabBar.Item>
                    )
                  })
                }
                </TabBar>
            </div>
          );


        }
      }
    </MapConsumer>)
  }
}
